<template>
  <div class="capability-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产能力</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main-content">
      <!-- 生产设备表格 -->
      <el-card class="equipment-section">
        <template #header>
          <h2>生产设备与技术参数</h2>
        </template>
        <el-table :data="productionLines" border>
          <el-table-column prop="type" label="设备类型" width="200" />
          <el-table-column prop="speed" label="运行速度" />
          <el-table-column prop="width" label="加工宽度" />
          <el-table-column prop="function" label="功能特点" width="300" />
        </el-table>
      </el-card>

      <!-- 产能计算 -->
      <el-row :gutter="20" class="capacity-section">
        <el-col :span="12">
          <el-card>
            <template #header>
              <h3>实时产能计算</h3>
            </template>
            <div class="capacity-display">
              <span class="label">{{ $t('production.dailyCapacity') }}：</span>
              <span class="value">80万米/天</span>
              <el-row :gutter="16">
                <el-col :span="12">
                  <el-statistic 
                    :title="$t('production.annualCapacity')" 
                    :value="150" 
                    suffix="百万米"
                    value-style="color: var(--el-color-primary);"
                  />
                </el-col>
                <el-col :span="12">
                  <el-statistic
                    :title="$t('production.materialThickness')"
                    :value="[40, 200]"
                    format="\${value[0]} - \${value[1]}μm"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <!-- 认证证书 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <h3>资质认证</h3>
            </template>
            <el-timeline>
              <el-timeline-item
                v-for="(cert, index) in certifications"
                :key="index"
                :timestamp="cert.date"
                placement="top"
              >
                {{ cert }}
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </el-col>
      </el-row>

      <!-- 环保生产指标 -->
      <el-row :gutter="20" class="eco-section">
        <el-col :span="24">
          <el-card>
            <template #header>
              <h3>环保生产指标</h3>
            </template>
            <el-row :gutter="16">
              <el-col 
                v-for="(val, key) in factoryStore.getEnvironmentalData"
                :key="key"
                :xs="24"
                :sm="12"
                :md="6"
              >
          <el-card shadow="hover" class="eco-metric">
            <div class="metric-label">
              <el-icon><TrendCharts /></el-icon>
              {{ $t(`production.${key}`) }}
            </div>
            <el-progress 
              :percentage="val" 
              :color="customColors" 
              :show-text="false"
              :stroke-width="16"
            />
            <div class="metric-value">
              <el-statistic :value="val" :precision="0">
                <template #suffix>
                  <span style="font-size: 14px">%</span>
                </template>
              </el-statistic>
            </div>
          </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 客户案例 -->
      <el-card class="case-section">
        <template #header>
          <h2>典型客户案例</h2>
        </template>
        <el-row :gutter="20">
          <el-col 
            v-for="(caseItem, index) in clientCases"
            :key="index"
            :xs="24"
            :sm="12"
            :md="8"
          >
            <el-card class="case-card">
              <h4>{{ caseItem.name }}</h4>
              <div class="case-content">
                <p class="solution">{{ caseItem.solution }}</p>
                <div class="capacity">
                  <i class="el-icon-data-analysis"></i>
                  {{ caseItem.capacity }}
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useFactoryStore } from '@/store/factoryInfo.js'
import { storeToRefs } from 'pinia'
import { TrendCharts } from '@element-plus/icons-vue'

const factoryStore = useFactoryStore()
const { productionLines, certifications, clientCases } = storeToRefs(factoryStore)

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]
</script>

<style lang="scss" scoped>
.capability-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  .main-content {
    margin-top: 20px;
  }

  .capacity-display {
    font-size: 18px;
    .value {
      color: var(--el-color-primary);
      font-weight: bold;
    }
  }

  .eco-metric {
    padding: 15px;
    background: var(--el-bg-color-page);
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s;

    &:hover {
      box-shadow: var(--el-box-shadow-light);
      transform: translateY(-3px);
    }

    .metric-label {
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin-bottom: 8px;
    }

    .metric-value {
      color: var(--el-color-success);
      font-size: 16px;
      font-weight: 500;
    }
  }

  .case-card {
    margin-bottom: 20px;
    .case-content {
      padding: 10px;
      .solution {
        color: #666;
        min-height: 60px;
      }
      .capacity {
        color: var(--el-color-success);
        display: flex;
        align-items: center;
        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
